import {useEffect, useState} from "react";
import {Descriptions, Form, Input, Modal} from 'antd';
import ProSkeleton from '@ant-design/pro-skeleton';
import {getInvoiceOrderDetail} from "@/services/ant-design-pro/FinancialOperation";
import {ProFormRadio, ProFormText} from "@ant-design/pro-form";

const OrderDetailsModal = (props) => {
	const {visible, setVisible, id} = props;
	const [orderDetail, setOrderDetail] = useState({})
	useEffect(async () => {
		let data = await getInvoiceOrderDetail(id)
		console.log(data)
		setOrderDetail(data.data)
	}, [])

	return (
		<Modal
			width={800}
			visible={visible}
			title="发票详情"
			onCancel={() => {
				setVisible(false)
			}}
		>
			<Form
				initialValues={orderDetail}
			>
				{visible ?
					<div>
						<Descriptions
							title="发票信息"
							column={2}
							style={{borderBottom: '1px solid #ccc', marginBottom: '10px'}}
							contentStyle={{color: '#666'}}
							labelStyle={{color: '#666'}}
						>
							<Descriptions.Item label="发票抬头">{orderDetail.user?.nickname}</Descriptions.Item>
							<Descriptions.Item label="发票类型">{orderDetail.user_name}</Descriptions.Item>
							<Descriptions.Item label="发票抬头类型">{orderDetail.user_phone}</Descriptions.Item>
						</Descriptions>

						<Descriptions
							contentStyle={{color: '#666'}} labelStyle={{color: '#666'}}
							title="联系信息"
							column={2}
						>
							<Descriptions.Item label="真实姓名">{orderDetail.order_number}</Descriptions.Item>
							<Descriptions.Item label="联系电话">{orderDetail.status_text}</Descriptions.Item>
							<Descriptions.Item label="联系邮箱">{orderDetail.total_num}</Descriptions.Item>
						</Descriptions>
					<div style={{borderTop:'1px solid #ccc'}}>
						<ProFormRadio.Group
							name="invoice"
							label="开票状态"
							options={[
								{
									label: '已开票',
									value: '1',
								},
								{
									label: '未开票',
									value: 'b',
								},
							]}
						/>
						<Form.Item shouldUpdate={(prevValues, curValues) => prevValues.invoice !== curValues.invoice}>
							{(forminstance) => {
								switch (forminstance.getFieldValue('invoice')){
									case '1' :
										return (
											<>
												<ProFormText  label="发票编号:" placeholder="请输入发票编号" name="wechat_code"/>
												<Form.Item name="remarks" label="发票备注：" >
													<Input.TextArea showCount={true} placeholder="请输入发票备注" maxLength={200}/>
												</Form.Item>
											</>
										)
										break;
								}
							}}
						</Form.Item>
					</div>
					</div>
					: <ProSkeleton type="result"/>
				}
			</Form>
		</Modal>
	);
};

export default OrderDetailsModal;
